{% extends "base_lite.html" %}

{% block title %}用户登录{% endblock %}

{% block content %}
<div class="container">
    <div class="card" style="max-width: 500px; margin: 2rem auto;">
        <div class="text-center mb-4">
            <h2 class="fw-bold" style="color: var(--primary);">🔑 用户登录</h2>
            <p class="text-muted">请输入您的登录凭据</p>
        </div>

        <form method="post">
            <div class="mb-3">
                <label for="username" class="form-label">👤 用户名</label>
                <input type="text" class="form-control" id="username" name="username" required placeholder="请输入用户名">
            </div>

            <div class="mb-4">
                <label for="password" class="form-label">🔒 密码</label>
                <input type="password" class="form-control" id="password" name="password" required placeholder="请输入密码">
            </div>

            <button type="submit" class="btn btn-primary w-100 mb-4">🚀 登录系统</button>
        </form>

        <div style="border-top: 1px solid #e5e7eb; padding-top: 1rem;">
            <h6 class="text-center text-muted mb-3">🎯 快速登录</h6>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; text-align: center;">
                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">👨‍💼</div>
                    <h6 class="fw-bold">管理员</h6>
                    <p style="font-family: monospace; margin: 0.25rem 0; font-size: 0.875rem;">admin</p>
                    <p style="font-family: monospace; margin: 0.25rem 0; font-size: 0.875rem; color: #666;">admin123</p>
                    <button class="btn btn-outline btn-sm w-100 mt-2" onclick="quickLogin('admin', 'admin123')">
                        ⚡ 快速登录
                    </button>
                </div>
                <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; text-align: center;">
                    <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">👤</div>
                    <h6 class="fw-bold">普通用户</h6>
                    <p style="font-family: monospace; margin: 0.25rem 0; font-size: 0.875rem;">user</p>
                    <p style="font-family: monospace; margin: 0.25rem 0; font-size: 0.875rem; color: #666;">user123</p>
                    <button class="btn btn-outline btn-sm w-100 mt-2" onclick="quickLogin('user', 'user123')">
                        ⚡ 快速登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function quickLogin(username, password) {
    document.getElementById('username').value = username;
    document.getElementById('password').value = password;
    
    // 添加视觉反馈
    const usernameField = document.getElementById('username');
    const passwordField = document.getElementById('password');
    
    usernameField.style.borderColor = 'var(--success)';
    passwordField.style.borderColor = 'var(--success)';
    
    setTimeout(() => {
        usernameField.style.borderColor = 'var(--border)';
        passwordField.style.borderColor = 'var(--border)';
    }, 1000);
    
    showToast(`已填入${username === 'admin' ? '管理员' : '普通用户'}账号信息`, 'success');
}
</script>
{% endblock %}
